<template>
  <div class="lotteryModular headerTopMain">
    <!--开奖公告-->
    <div class="lotNotice displayFlex">
      <div class="lotNoticeLeft">
        <article class="lotArticle displayFlex">
          <section class="title"><p>开奖公告：</p></section>
          <section class="annMarquee">
            <marquee onmouseover=this.stop() onmouseout=this.start()>
              <router-link :to="{name:'index',params:{type:announceListItem.id}}"  v-for="(announceListItem,anIndex) in platformAnnounce" v-html='announceListItem.content' tag='p' :key="anIndex"></router-link>
            </marquee>
          </section>
        </article>
      </div>
      <div class="lotNoticeRight">
        <section><i class="giftIcon"></i>累计中奖金额 <span class='prize'>{{prize}}</span>元</section>
      </div>
    </div>
    <!--彩种列表-->
    <div class="lotList displayFlex">
      <div class="lotteryCls">
        <div class="lotImgList">
          <ul class="displayFlex">
            <li v-for="(creditPlayItem,itemIndex) in creditTopData" @click="comPlayEvent(creditPlayItem.code)">
              <!--{{creditImgList[itemIndex].img}}-->
              <img :src="creditImgList[itemIndex].img" alt="">
              <div class="creditDiv">
                <p>{{creditPlayItem.name}}</p>
                <p>{{creditPlayItem.info}}</p>
                <p>立即投注</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="lotAllLottery">
          <ul>
            <li v-for="allLot in allLotteryData">
              <article class="allLotArticle">
                <aside>{{allLot.name}}</aside>
                <section>
                  <p @click="comPlayEvent(sub.isDefault=='2'?sub.creditCode:sub.officialCode)" v-for="sub in allLot.subKindList">{{sub.name}}</p>
                </section>
              </article>
            </li>
          </ul>
        </div>
      </div>
      <!--中奖通知-->
      <div class="lotWining">
        <div class="lotWinTop">
          <div class="lotteryOrTitle">中奖通知</div>
          <div class="lotteryOrList">
            <ul>
              <li v-for="win in lotteryWinning">{{win.username}}在{{win.name}}中奖{{win.amount}}元</li>
            </ul>
          </div>
        </div>
        <div class="lotWinBottom relative">
          <div class="lotWinRWM">
            <!--<canvas class="canvas"></canvas>-->
            <div class="downloadImg">
              <img :src="downloadUrl" alt="">
            </div>
            <section class="lotWinSection">
              <p><img src="../../../assets/images/home/lottery/az02.png" alt=""></p>
              <p><img src="../../../assets/images/home/lottery/az01.png" alt=""></p>
              <p>APP下载</p>
            </section>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import './lottery.scss';
import { mapState } from 'vuex';
export default {
  data () {
    return {
      winningTimer:null,//中奖通知定时器
      platformAnnounce: [], // 开奖公告
      prize: "0.00", // 奖池金额
      creditTopData: [], // 推荐彩种
      creditLotteryData: [],
      creditImgList: [
        {img: require('../../../assets/images/home/lottery/01.png')},
        {img: require('../../../assets/images/home/lottery/02.png')},
        {img: require('../../../assets/images/home/lottery/03.png')},
        {img: require('../../../assets/images/home/lottery/04.png')}
      ], // 推荐彩种图片
      allLotteryData: [], // 购彩彩种
      lotteryWinning: [], // 中奖通知
      downloadUrl:'',//下载链接
      // imgNotice: require('../../../assets/images/home/notice.png'),
    }
  },
  computed: {
    ...mapState({
      homeData: state => state.mutations.homeStateData,
      allLotteryList: state => state.mutations.allLotteryListData,
      footerInfo: state => state.mutations.prize,
    })
  },
  activated() {
    this.init();
  },
  mounted() {

  },
  methods: {
    init() {
      let that = this;
      if (that.homeData.length <= 0) return false;
      that.platformAnnounce = that.homeData.noticeList||[];
      // 推荐彩种
      that.creditLotteryData = that.homeData.lotteryList||[];
      that.creditTopData = that.sliceData(that.creditLotteryData, 0, 3);
      // 中奖通知
      that.lotteryWinning = that.homeData.winningList||[];
      that.initData();
      that.seamlessMethod();
    },
    initData() {
      let that = this;
      that.prize = that.footerInfo.money;
      that.allLotteryData = that.allLotteryList.tradition || [];
      that.downloadUrl = that.homeData.phone_purchase||'';
      if(that.downloadUrl){
//        that.creatQrcode(that.downloadUrl);
      }
    },
    sliceData(data, start, end) {
      if (end) {
        return data.slice(start * 1, (end * 1 + 1));
      } else {
        return data.slice(start * 1);
      }
    },
    //生成二维码
    creatQrcode(path) {
      this._QRCode.toCanvas($(".canvas").eq(0)[0], path, function (error) {
        if (error) console.error(error)
      })
    },
    //购彩跳转
    comPlayEvent(code) {
      let that = this,
        lotNameUtils = that._Util.lotteryNameUtils(code);
      if(!that._Util.whetherLogin()){
        that.$router.push({name: 'login'});
        return;
      }
      if(that._Format.determineColor(code).letter) {
        that.$router.push({name: "credit", query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
      }else if(that._Format.determineColor(code).officer) {
        that.$router.push({name: "official", query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
      }else{
        that.$router.push({name: that._Format.gameName(code), query: {code: code, index: lotNameUtils.index, lotteryTrue: true}});
      }
    },
    seamlessMethod: function () {
      let _this = this;
      let lotteryDiv = $('.lotteryOrList');
      clearInterval(_this.winningTimer);
      if (_this.lotteryWinning.length <= 5) return;
      lotteryDiv.mouseover(function () {
        clearInterval(_this.winningTimer);
      }).mouseout(function () {
        clearInterval(_this.winningTimer);
        _this.winningTimer = setInterval(function () {
          _this.methodScroll(lotteryDiv);
        }, 1500);
      }).trigger("mouseout");
    },
    methodScroll: function (obj) {
      let oLi = obj.find("ul:first");
      let lineHeight = oLi.find("li:first").height();
      oLi.animate({
          "margin-top": -lineHeight + "px"
        },
        500,
        function () {
          oLi.css({
            "margin-top": "0px"
          }).find("li:first").appendTo(oLi);
        })
    },
  },
  watch: {
    'homeData'() {
      this.init();
    },
    '$parent.allLotteryData'() {
      this.initData();
    },
    'allLotteryList.tradition'(){
      this.allLotteryData = this.allLotteryList.tradition || [];
    },
    'footerInfo'(val){
      if(this.$route.name === 'index') {
        this.initData();
      }
    },
  }
}
</script>
